import { App, DirectiveBinding } from 'vue'
import useBtnPermission from '@/hooks/useBtnPermission'

export function setupPermissionDirective(app: App<Element>) {
  app.directive('perm', {
    mounted: (
      el: HTMLElement,
      binding: DirectiveBinding<string | string[]>
    ) => {
      const { hasPermission } = useBtnPermission()
      const { value } = binding
      if (!hasPermission(value)) {
        el.setAttribute('style', 'display:none')
        el.parentNode?.removeChild(el)
      }
    },
  })
}
